import { CalendarDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Calendar);

## Usage

Use `Calendar` component to create custom date pickers if [DatePicker](/dates/date-picker/)
component does not meet your requirements. `Calendar` supports all [DatePicker](/dates/date-picker/)
props and some other props that are listed in props table – check it out to learn about all component features.

By default, `Calendar` works the same way as [DatePicker](/dates/date-picker/) component but does not
include any logic of dates selection:

<Demo data={CalendarDemos.usage} />

## Custom date pickers

Use `Calendar` as a base for custom date pickers. For example, you can create a date picker
that allows user to pick three or less dates:

<Demo data={CalendarDemos.picker} />

Another custom date picker example – week picker:

<Demo data={CalendarDemos.weekPicker} />

## Static prop

Set `static` prop to display a calendar that user cannot interact with.
It is useful when you want to display data with in calendar view but do
not want it to be interactive.

<Demo data={CalendarDemos.isStatic} />
